<template>
  <!-- 角色管理 -->
  <div flex="dir:top" class="height100">
    <div class="button_Box" flex-box="0">
      <el-input
        v-model="keyword"
        class="inputWidth MARGIN_RIGHT"
        placeholder="请输入"
        clearable
      />
      <el-button color="#5689D6" plain @click="getReviewUserList()"
        >查询</el-button
      >
      <el-button color="#EB932C" plain @click="resetList()">重置</el-button>
      <el-button color="#5689D6" plain>导出</el-button>

      <el-button class="FLOAT_RIGHT" color="#5689D6" plain @click="addForm"
        >添加角色</el-button
      >
    </div>
    <div class="list_box" flex-box="1">
      <SPRSTTable
        :customTableItem="customTableItem"
        :tableData="tableData"
        :page="page"
        @btnConfig="getBtnConfig"
      />
    </div>
    <div flex-box="0">
      <Pagination :page="page" @getPageData="getPageData" />
    </div>
    <el-dialog v-model="dialogFormVisible" title="添加角色" center width="60%">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="角色名称：" prop="roleName">
          <el-input v-model="ruleForm.roleName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="名称描述：">
          <el-input v-model="ruleForm.roleDescription" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogTreeVisible" title="添加角色" center width="60%">
      <el-tree
        ref="treeRef"
        :data="treeData"
        show-checkbox
        node-key="id"
        :default-expanded-keys="treeCheckedKeys"
        :default-checked-keys="treeCheckedKeys"
        :props="defaultProps"
        @check-change="handleCheckChange"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogTreeVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitTree()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUpdated, nextTick } from "vue";
import {
  roleAddListApi,
  roleListApi,
  roleDeleteListApi,
  roleEditListApi,
  getRolePermissionApi,
  saveRolePermissionApi,
} from "@/api/centralUserManagement.js"; //列表接口
import { ElMessage } from "element-plus";

onMounted(() => {
  resetForm();
  getReviewUserList();
});
let customTableItem = ref([
  //列表表头
  {
    prop: "roleName",
    label: "角色名称",
    width: "220",
    align: "center",
  },
  {
    prop: "roleDescription",
    label: "角色描述",
    width: "220",
    align: "center",
  },
  {
    prop: "createPersonName",
    label: "创建人",
    align: "center",
  },
  {
    prop: "createTime",
    label: "创建日期",
    align: "center",
  },
  {
    prop: "sourceSite",
    type: "handler",
    label: "操作",
    width: "350",
    align: "center",
    configList: [
      {
        // permissionCode: "information_announcement_viewer:detail_function",
        // parentCode: "information_announcement_viewer:menu",
        disabledKey: "customType",
        handler: "detail",
        color: "#5689D6",
        label: "编辑",
      },
      {
        // permissionCode: "information_announcement_viewer:detail_function",
        // parentCode: "information_announcement_viewer:menu",
        disabledKey: "customType",
        handler: "resetPassWord",
        color: "#EB932C",
        label: "权限设置",
      },
      {
        // permissionCode: "information_announcement_viewer:detail_function",
        // parentCode: "information_announcement_viewer:menu",
        disabledKey: "customType",
        handler: "red",
        color: "#F4535D",
        label: "删除",
      },
    ],
  },
]);
const defaultProps = {
  children: "children",
  label: "permissionName",
};
let treeData = ref([]); //角色权限树形数据
let treeCheckedKeys = ref([]); //默认勾选
let tableData = ref([]); //列表数据

const treeRef = ref();
const dialogFormVisible = ref(false);
const dialogTreeVisible = ref(false);
const ruleForm = reactive({
  roleName: "",
  roleDescription: "",
});

let keyword = ref("");
let page = reactive({
  pageSize: 10,
  pageNumber: 1,
  totalLength: 1,
  currentPage: 1,
});
let rowData = reactive({});
//校验
const rules = reactive({
  roleName: [{ required: true, message: "必填", trigger: "blur" }],
});
function resetForm() {
  //清空表单数据
  ruleForm.roleName = "";
  ruleForm.roleDescription = "";
}
function resetList() {
  //重置列表
  resetForm();
  keyword.value = "";
  page.pageSize = 10;
  page.pageNumber = 1;
  page.totalLength = 1;
  page.currentPage = 1;
  keyword.value = "";
  getReviewUserList();
}
function getReviewUserList() {
  //列表接口
  let params = {
    pageSize: page.pageSize,
    pageNumber: page.pageNumber,
    keyword: keyword.value,
  };
  roleListApi({ ...params }).then((res) => {
    tableData.value = res.data.list;
    page.totalLength = Number(res.data.total);
  });
}
function addForm() {
  dialogFormVisible.value = true;
  resetForm();
}
function getBtnConfig(data, row) {
  //点击列表操作
  rowData = row;
  if (data.label == "删除") {
    deleteRow(row);
  }
  if (data.label == "编辑") {
    dialogFormVisible.value = true;
    resetForm();
    ruleForm.roleName = row.roleName;
    ruleForm.roleDescription = row.roleDescription;
  }
  if (data.label == "权限设置") {
    openDialogTree(row);
  }
}
function getPageData(data) {
  //分页
  let params = {
    pageSize: page.pageSize,
    pageNumber: page.pageNumber,
    keyword: keyword.value,
  };
  roleListApi({ ...params }).then((res) => {
    tableData.value = res.data.list;
    page.totalLength = Number(res.data.total);
  });
}
function deleteRow(row) {
  //删除
  roleDeleteListApi({ id: row.id }).then((res) => {
    if (res.code == 200) {
      getReviewUserList();
      ElMessage({
        message: res.message,
        type: "success",
      });
      dialogFormVisible.value = false;
    }
  });
}
function submitForm() {
  //保存新增角色
  roleAddListApi(ruleForm).then((res) => {
    if (res.code == 200) {
      getReviewUserList();
      ElMessage({
        message: res.message,
        type: "success",
      });
      dialogFormVisible.value = false;
    }
  });
}
function handleCheckChange(data) {}

function submitTree(data) {
  //保存新增角色权限
  saveRolePermissionApi({
    id: rowData.id,
    permissionIds: treeRef.value
      .getCheckedNodes(false, false)
      .map((item) => item.id),
  }).then((res) => {
    if (res.code == 200) {
      // getReviewUserList();
      ElMessage({
        message: res.message,
        type: "success",
      });
      dialogTreeVisible.value = false;
    }
  });
}
function forTree(data) {
  //遍历是否已有权限
  if (!Array.isArray(data)) return;
  data.forEach((element) => {
    if (element.owned) {
      treeCheckedKeys.value.push(element);
    }
  });
  forTree(data.children);
}

function openDialogTree(row) {
  //打开角色权限窗口
  treeCheckedKeys.value = []; //清空已存勾选
  dialogTreeVisible.value = true;
  getRolePermissionApi({ id: row.id, permissionIds: row.id }).then((res) => {
    //角色权限接口
    treeData.value = res.data;
    treeRef.value.setCheckedKeys([], false); //清空树形勾选
    forTree(res.data); //遍历是否已有权限
    treeRef.value.setCheckedKeys(
      //返回已有权限
      treeCheckedKeys.value.map((item) => item.id),
      false
    );
  });
}
</script>

<style>
</style>